<template>
  <div class="container">
    <div class="header">生产产出</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, getCurrentInstance } from 'vue';
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';

  const option = {
    tooltip: commomOption.tooltip,
    legend: commomOption.legend,
    grid: commomOption.grid,
    xAxis: Object.assign({}, commomOption.xAxis, {
      data: ['小数控', '中数控', '紧密数控'],
    }),
    yAxis: commomOption.yAxis,
    series: [
      {
        name: '1-3月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(12, 123, 236, 1)' },
            { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
          ]),
        },
        barMaxWidth: 40, // 设置柱子的最大宽度为30
        data: [120, 132, 101],
      },
      {
        name: '4-6月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(1, 254, 246, 1)' },
            { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
          ]),
        },
        data: [290, 330, 310],
      },
      {
        name: '7-9月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(246, 169, 68, 1)' },
            { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
          ]),
        },
        data: [150, 330, 410],
      },
    ],
  };
  const pictorialBarData = new Array(option.series[0].data.length).fill(0);
  for (var i = 0; i < 3; i++) {
    option.series[i].zindex = i + 1;
    pictorialBarData.map((item, idx) => {
      pictorialBarData[idx] = item + option.series[i].data[idx];
    });
    console.log(pictorialBarData);
    option.series.push({
      z: i + 10,
      type: 'pictorialBar',
      symbolPosition: 'end',
      symbol: 'diamond',
      symbolOffset: [0, '-50%'],
      symbolSize: [40, 10],
      data: [...pictorialBarData],
      itemStyle: option.series[i].itemStyle,
      tooltip: { show: false },
    });
  }
  // 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
  const { proxy } = getCurrentInstance();
  // 获取echart挂载的DOM节点
  const echartsBox = ref();
  // echartsf弹窗出现
  function echartInit() {
    //nextTick后再调用，不然会报错
    nextTick(() => {
      // echarts初始化
      let myChart = proxy.$echarts.init(echartsBox.value);

      option && myChart.setOption(option);

      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    });
  }

  echartInit();
</script>
<style lang="scss" scoped>
  @import url(./container.scss);
</style>
